<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,div,ul,ol,dl,li,dt,dd,p,h1,h2,h3,h4,h5,h6,tr,td,input,textarea{
        margin:0;
        padding:0;
        list-style:none;
        }
        img{
            width: 160px;;
            height: 100px;
            position: absolute;
        }
    </style>
</head>
<body>
<img src="images/bird.png" alt="" id="pic">
</body>

<script>
    window.onload = function(){
        var pic = document.getElementById('pic');
        document.onclick = function (event) {
            //获得兼容事件
            var Myevent = event || window.event;
            //获取当前鼠标所在的位置
            var M_X = Myevent.clientX-pic.offsetWidth;
            var M_Y = Myevent.clientY-pic.offsetHeight;
            console.log(M_X,M_Y);
            //将当前鼠标获取的位置设置为缓动动画的end值
            endX = M_X;
            endY = M_Y;
        };
            var beginX = 0;
            var beginY = 0;
            var endX = 0;
            var endY = 0;
            var timer = null;
            timer = setInterval(function () {
                var speedX = (endX-beginX)*0.2;
                var speedY = (endY-beginY)*0.2;
                beginX = beginX+speedX;
                beginY = beginY+speedY;
                pic.style.top = beginY +'px';
                pic.style.left = beginX +'px';
            },20);
    }
</script>
</html>